import { Button, Card, DatePicker } from 'antd'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import CakeData from './CensusSon/CakeData'
import LineData from './CensusSon/LineData'
import { getBillData } from '../../../../store/action/billData'
// 导入样式
import './index.scss'
const Census = () => {
  // 进入页面时重新加载账单所有的数据
  const dispatch = useDispatch()
  const tongJi = useSelector((item) => {
    return item.BillDatax
  })
  useEffect(() => {
    if (tongJi.length < 20) {
      dispatch(getBillData())
      window.location.reload() // 强制页面刷新
    }
  }, [])
  // 获取时间
  const [formDate, setFormDate] = useState('')
  const onChangeDate = (date, dateString) => {
    let datax = dateString
    datax =
      datax.substr(0, 4) +
      '年' +
      datax.substr(5, 2) +
      '月' +
      datax.substr(8, 2) +
      '日'
    setFormDate(datax)
  }

  // 年月按钮颜色切换
  const [nyCorlor, setNyCorlor] = useState(true)
  const nyCorlorFn = () => {
    setNyCorlor(!nyCorlor)
  }

  return (
    <div>
      {/* 统计页面卡片 */}
      <Card className="Census">
        {/* 日期选择框 */}
        <DatePicker
          placeholder="日期选择"
          style={{ width: '10vw', margin: '2vh 36vw 5vh 3vw' }}
          onChange={onChangeDate}
        />
        {/* 年月选择按钮 */}
        <Button
          type={nyCorlor ? 'primary' : 'dashed'}
          onClick={nyCorlorFn}
          style={{ borderRadius: '30% 0 0 30% ' }}>
          月
        </Button>
        <Button
          type={!nyCorlor ? 'primary' : 'dashed'}
          onClick={nyCorlorFn}
          style={{ borderRadius: '0 30% 30% 0 ' }}>
          年
        </Button>

        {/* 线型图 */}
        <LineData />

        {/* 饼形图 */}
        <h2 style={{ margin: '-40px 0 0 60px', fontWeight: '900' }}>
          分类统计
        </h2>
        <CakeData />
        <CakeData bing={'two'} />
      </Card>
    </div>
  )
}
export default Census
